{extend name="../../base/view/common/base" /}

{block name="style"}
<style>
.content-content {line-height:1.5;}
.content-content p{padding:5px 0;}
.content-content img{max-width:90%; height:auto; margin:3px 0;}
</style>
{/block}
<!-- 主体 -->
{block name="body"}
<form class="layui-form p-page">
	<h3 class="pb-2">学习内容详情</h3>
	<table class="layui-table layui-table-form">
		<tr>
			<td class="layui-td-gray">内容标题</td>
			<td colspan="5"><input type="hidden" name="types" value="{$detail.types}">{$detail.title}</td>	
		</tr>
		<tr>
			<td class="layui-td-gray">内容类型</td>
			<td>{$detail.type_str}</td>	
			<td class="layui-td-gray">学习积分</td>
			<td>{$detail.integral}</td>	
			<td class="layui-td-gray">学习时长</td>
			<td>{$detail.hour} 小时 {$detail.minute} 分 {$detail.second} 秒</span></td>	
		</tr>
		<tr>
			<td colspan="6"><strong>内容详情</strong></td>
		</tr>
		{eq name="$detail.types" value="1"}
		<tr>
			<td colspan="6">
				<div class="p-2" id="player" data-url="{$detail.url}"></div>
			</td>
		</tr>
		{/eq}
		{eq name="$detail.types" value="2"}
		<tr>
			<td colspan="6">
				<div class="p-2" id="player" data-url="{$detail.url}"></div>
			</td>
		</tr>
		{/eq}
		{eq name="$detail.types" value="3"}
		<tr>
			<td colspan="6">
				<iframe width="100%" height="600px" frameborder="0" align="left" src="{$detail.url}"></iframe>
			</td>
		</tr>
		{/eq}
		{eq name="$detail.type" value="4"}
		<tr>
			<td class="layui-td-gray red">温馨提示</td>
			<td colspan="5">
				<span class="red">PPT文件预览查看使用的是微软官方的接口，如果服务器是局域网，不支持公网访问的，且没配置域名的，PPT文件不支持预览查看，建议使用PDF格式。</span>
			</td>
		</tr>
		<tr>
			<td colspan="6">
				<iframe width="100%" height="600px" frameborder="0" align="left" src="https://view.officeapps.live.com/op/embed.aspx?src={$host}{$detail.url}"></iframe>
			</td>
		</tr>
		{/eq}
		{eq name="$detail.types" value="5"}
		<tr>
			<td class="layui-td-gray red">温馨提示</td>
			<td colspan="5">
				<span class="red">Word文件预览查看使用的是微软官方的接口，如果服务器是局域网，不支持公网访问的，且没配置域名的，Word文件不支持预览查看，建议使用PDF格式。</span>
			</td>
		</tr>
		<tr>
			<td colspan="6">
				<iframe width="100%" height="600px" frameborder="0" align="left" src="https://view.officeapps.live.com/op/embed.aspx?src={$host}{$detail.url}"></iframe>
			</td>
		</tr>
		{/eq}
		{eq name="$detail.types" value="6"}
		<tr>
			<td colspan="6">
				<div class="content-content">{$detail.content|raw}</div>
			</td>
		</tr>
		{/eq}
	</table>
</form>
{/block}
<!-- /主体 -->

<!-- 脚本 -->
{block name="script"}
{lt name="$detail.types" value="3"}
<link href="{__GOUGU__}/third_party/TCPlayer/tcplayer.min.css" rel="stylesheet"/>
<script src="{__GOUGU__}/third_party/TCPlayer/libs/hls.min.0.13.2m.js"></script>
<script src="{__GOUGU__}/third_party/TCPlayer/tcplayer.v4.5.2.min.js"></script>
<script>
	function appendVideo(url){
		let id=Date.now();
		if(player){
			player.dispose();
		}
		let poster = '/static/home/images/bg.png';
		let thumb_id = $('#thumb').data('id');
		$('#player').html('<video id="player_'+id+'" width="782" height="440" preload="auto" playsinline webkit-playsinline></video>');
		var player = TCPlayer('player_'+id, {'poster':poster});
		player.src(url);
	}

	var typeTps = ['','.avi、.wmv、.mpg、.mpeg、.mov、.flv、.mp4','.pdf','.doc、.docx','.ppt、.pptx'];
	var typeExt = ['','avi|wmv|mpg|mpeg|mov|flv|mp4','pdf','doc|docx','ppt|pptx'];
	
	var moduleInit = ['tool'];
	function gouguInit() {
		var form = layui.form, tool = layui.tool;
		var types = $('[name="types"]').val();
		if(types==1 || types==2){
			appendVideo($('#player').data('url'));
		}
	}
{/lt}
</script>
{/block}
<!-- /脚本 -->